@charset "UTF-8";
@import "./_kit/variables.scss";
@import "./_kit/_mixin.scss";
@import "../sass/_kit/variables.scss";
@import "../sass/_kit/_mixin.scss";
@import "./_components/radio.scss";


.qa-container{
    background: url("../assets/images/background.png") repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    padding:$rem*30 $rem*20;
    .qa-wrap{
        width: 100%;
        height: 100%;
        background-color: rgba(253,255,254,.9);
        border-radius: 10px;
        padding: $rem*30 $rem*50;

        h1{
            font-size: $rem*32;
            color: #333;
            //line-height: $rem*150;
            //text-align: center;
           // font-weight: bold;
        }
        .qa-content{
            .qa-info{
                //margin: $rem*30;
                margin-top: $rem*50;
                h3 {
                    font-size: $rem*26;
                    color: #333;
                }
                .answer{
                    &>li{
                        padding-top: $rem*20;
                        font-size: $rem*26;
                        position: relative;
                        input{
                            padding-left: 100px;
                        }
                        input[type=radio] {
                            width: $rem*26;
                            height: $rem*26;
                            vertical-align: -$rem*6;
                            margin-right: $rem*20;
                        }
                        //.question-radio{
                        //    background: url("../assets/images/checked.png") no-repeat;
                        //    width: $rem*26;
                        //    height: $rem*26;
                        //    background-size: cover;
                        //    position: absolute;
                        //    top: 26px;
                        //    left: 3px;
                        //}
                    }
                }
            }
            .qa-list{
                color:#333;
                font-size: $rem*26;
                & >li {
                    & > h3{
                        margin-bottom: $rem*10;
                    }
                    margin-top: $rem*47;
                }
            }
        }
        .result-content{
            margin: $rem*30;
            h3{
                font-size: $rem*42;
                color: #333;
                text-align: center;
                padding-bottom: $rem*40;
            }
            p{
                font-size: $rem*34;
                color: #333;
            }
        }
        .next{
            text-align: center;
            button{
                width: $rem*186;
                height: $rem*88;
                background-color:#C52B3E;
                border-radius: $rem*10;
                margin-bottom: $rem*100;
                font-size: 1rem;
                margin-top: $rem*350;
                color: #fff;
                border: none;
                padding: 0 $rem*20;
            }
        }
        .button-content{
            button{
                margin: $rem*350 $rem*20 $rem*100 $rem*20;
                padding: 0;
                border: none;
            }
        }
    }
}

.share-layer{
    position: fixed;
    z-index: 10;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,.6);
    background-image: url("../assets/images/share_weixin.png");
    background-repeat: no-repeat;
    background-position:100% 0%;
    text-align: center;
    color: #fff;
    padding-top:$rem*350;
    font-size: $rem*24;
}
